<template>
    <div>
        <div class="box" id="peisingContent">
            <div class="flex justify_center" style="font-size: 16px;font-weight: 600;">四川威斯腾物流有限公司</div>
            <div class="flex justify_center" style="font-size: 16px;font-weight: 600;margin-bottom: 24px;">送货派车单</div>
            <a-image class="logoImg" src="/logo.png"></a-image>
            <div class="flex">
                <div style="height: 300px;width: 36px;writing-mode: tb-rl;margin-top: 40px;margin-right: 10px" >
                    <div class="flex justify_center">
                        <div style="margin-bottom: 20px;">第一联存根</div>
                        <div style="margin-bottom: 20px;">第二联财务</div>
                        <div>第三联客户</div>
                    </div>
                    <div class="flex justify_center" >
                        <div style="margin-bottom: 20px;">第四联司机</div>
                        <div>第五联操作</div>
                    </div>
                </div>
                <div  class="flex_1">
                    <div class="flex justify_between" style="margin-bottom: 8px;">
                        <div>配送单位：{{ checkDeptName(props.row.peisong_dept_id) }}</div>
                        <div>车牌号：{{props.row.deriver_car_no}}</div>
                        <div>派单人：{{props.row.create_user?.nickname}}</div>
                    </div>
                    <div class="border">
                        <div class="flex ">
                            <div class="flex flex_1 text_center">
                                <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                    <div>运单编号</div>
                                </div>
                                <div class="flex_1 padd12 bor_r bor_b center">
                                    <div>{{props.row.detail[0]?.prediction.yundanhao}}</div>
                                </div>
                            </div>
                            <div class="flex flex_1  text_center">
                                <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                    <div>运输类型</div>
                                </div>
                                <div class="flex_1 padd12  bor_b center">
                                    <div>{{props.row.transport_type == 1?'集装箱':props.row.transport_type == 2?'整车':'批量零散'}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="flex ">
                            <div class="flex flex_1 text_center">
                                <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                    <div>发货单位</div>
                                </div>
                                <div class="flex_1 padd12 bor_r bor_b center">
                                    <div>{{props.row.detail[0].prediction.shipper}}</div>
                                </div>
                                
                            </div>
                            <div class="flex flex_1  text_center">
                                <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                    <div>发货电话</div>
                                </div>
                                <div class="flex_1 padd12  bor_b center">
                                    <div>{{props.row.detail[0].prediction.shipper_phone}} </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex ">
                            <div class="flex flex_1 text_center">
                                <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                    <div>收货单位</div>
                                </div>
                                <div class="flex_1 padd12 bor_r bor_b center">
                                    <div> {{props.row.dept.name}}</div>
                                </div>
                                
                            </div>
                            <div class="flex flex_1  text_center">
                                <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                    <div>收货电话</div>
                                </div>
                                <div class="flex_1 padd12  bor_b center">
                                    <div> {{props.row.dept.phone}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="flex text_center">
                            <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                <div>送货地址</div>
                            </div>
                            <div class="flex_1 padd12  bor_b center" style="justify-content: flex-start;">
                                <div> {{props.row.delivery_address || props.row.detail[0].prediction.peisong_address.address}}</div>
                            </div>
                        </div>
                        <div class="flex text_center">
                            <div class="flex_1 flex">
                                <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                    <div>品名</div>
                                </div>
                                <div class="flex_1 padd12 bor_r bor_b center" >
                                    <div> 件数</div>
                                </div>
                                <div class="flex_1 padd12 bor_r bor_b center" >
                                    <div> 重量</div>
                                </div>
                                <div class="flex_1 padd12 bor_r bor_b center" >
                                    <div> 体积</div>
                                </div>
                            </div>
                            <div class="flex_1 flex">
                                <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                    <div>车号(箱号)</div>
                                </div>
                                <div class="flex_1 padd12 bor_r bor_b center" >
                                    <div> 派单时间</div>
                                </div>
                                <div class="flex_1 padd12  bor_b center" >
                                    <div> {{props.row.created_at.split(" ")[0]}}</div>
                                </div>
                                
                            </div>
                        </div>
                        <!-- 货物数据 -->
                        <div class="flex text_center">
                            <div class="flex flex_column" style="width: calc(50% + 100px);">
                                <div class="" v-for="(item,index) in props.row.detail" :key="index">
                                    <div class="flex" v-for="(ite,ind) in item.prediction.goods_data" :key="ind">
                                        <div class="padd12 bor_r bor_b center" style="width: 100px;" :style="{height:item.prediction.goods_name == ''?'39px':'auto'}">
                                            <div>{{item.prediction.goods_name}}</div>
                                        </div>
                                        <div class="flex_1 padd12 bor_r bor_b center" >
                                            <div>{{ite.number_yu}}</div>
                                        </div>
                                        <div class="flex_1 padd12 bor_r bor_b center" >
                                            <div> {{ ite.hz_weight }}</div>
                                        </div>
                                        <div class="flex_1 padd12 bor_r bor_b center" >
                                            <div> </div>
                                        </div>
                                        <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                            <div>{{item.prediction.transport_type == 1 ?ite.box:item.prediction.car_type + ' ' + item.prediction.car_no}}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex flex_1">
                                    <div class="padd12 bor_r  center" style="width: 100px;">
                                        <div>备注</div>
                                    </div>
                                    <div class="flex_1 padd12 bor_r  center" >
                                        <div> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex_1 flex flex_column">
                                <div class="flex">
                                    <div class="flex_1 padd12 bor_r bor_b center" >
                                        <div> 返单</div>
                                    </div>
                                    <div class="flex_1 padd12  bor_b center" >
                                        <div> </div>
                                    </div>
                                </div>
                                <div class="flex " >
                                    <div class="flex_1 padd12 bor_r bor_b center" >
                                        <div> 承运人</div>
                                    </div>
                                    <div class="flex_1 padd12  bor_b center" >
                                        <div> {{props.row.deriver_name}}</div>
                                    </div>
                                </div>
                                <div class="flex " >
                                    <div class="flex_1 padd12 bor_r bor_b center" >
                                        <div> 操作员</div>
                                    </div>
                                    <div class="flex_1 padd12  bor_b center" >
                                        <div> </div>
                                    </div>
                                </div>
                                <div class="flex flex_1">
                                    <div class="flex_1 padd12 bor_r  center" style="height:60px">
                                        <div> 收货人签章</div>
                                    </div>
                                    <div class="flex_1 padd12   center" >
                                        <div> </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div style="margin-top: 20px;" class="flex justify_end">
            <a-button  type="primary" @click="showCount = true">打印</a-button>
        </div>
        <a-modal :mask-closable="false" 
            v-model:visible="showCount"
            width="600px"
            title="提示"
            ok-text="打印"
            :footer="false"
        >
            <div class="flex justify_center align_center" style="height: 100px;">
                <div>已打印{{count}}次，确定打印？</div>
            </div>
            <div class="flex justify_end">
                <a-button v-print="printObj" type="primary">打印</a-button>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
 import { defineProps, defineEmits, ref, reactive, onMounted } from "vue";
 import predictionDeriverOrder from "@/api/prediction/predictionDeriverOrder";
 import { request } from "@/utils/request.js";
 const props = defineProps({
    row:Object,
    user:Object
 })
 const count = ref(0)
 const showCount = ref(false)
 const peisongDeptlist = ref([])
 const printObj = {
    id: "peisingContent",
    popTitle: "页面打印",
    openCallback: (vue) => {
        predictionDeriverOrder
            .getprintSave({ type: 5, link_id: props.row.id})
            .then((res) => {
                showCount.value = false
                handlegetCount()
            });
    },
 };
 const checkDeptName = (dept_id)=>{
    let name = ''
    peisongDeptlist.value.map((v,i)=>{
        if(v.id == dept_id){
            name = v.name
        }
    })
    return name
}
 const handlegetCount = () => {
    predictionDeriverOrder
       .getCount({ type: 5, link_id: props.row.id})
       .then((res) => {
            console.log(res)
            count.value = res.data.count
        }); 
 }
 onMounted(()=>{
    console.log('888888',props.user.nickname)
    console.log('888888',props.row)
    handlegetCount()
    request({
        url: 'system/dept/remote',
        method: 'post',
        data: {
        openPage: false,
        remoteOption: {
            filter: {
            type: ['=', 3],
            status: ['=',1]
            },
            select: ["id", "name"],
            sort: { id: "desc" }
        }
        }
    }).then(res => {
        peisongDeptlist.value = res.data
    })
 })
</script>

<style lang="less" scoped>
.box{
    width: 210mm;
    padding: 10mm;
    box-sizing: border-box;
    position: relative;
}
.logoImg{
    position: absolute;
    top: 10mm;
    width: 200px;
}
.border{
    border: 1px solid rgba(0,0,0,1);
}
.bor_r{
    border-right: 1px solid rgba(0,0,0,1);
}
.bor_b{
    border-bottom: 1px solid rgba(0,0,0,1);
}
.padd12{
    padding: 8px 10px;
    box-sizing: border-box;
}
.text_center{
    text-align: center;
}
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>